﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>供应商管理</title>
    <!-- 引入 Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        /* 页面整体背景 */
        body {
            background-color: #f0f2f5;
            margin: 0;
            padding: 0;
            font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
        }

        .container {
            width: 1200px;
            height: 600px;
            margin-left: 20px; /* 左侧导航的宽度，使主体在右侧固定 */
            margin-top: 20px;
            background-color: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            padding: 24px;
        }

        .search-area {
            margin-bottom: 16px;
            padding: 16px;
            background-color: #f5f7fa;
            border-radius: 4px;
        }

        .btn-group {
            margin-bottom: 16px;
            display: flex;
            gap: 8px;
        }

        .table-container {
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            overflow: hidden;
        }

        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }

        .searchForm-industry,
        .searchForm-status {
            width: 100px;
        }

        @@keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* 表头样式：灰色背景 + 加粗文字 */
        .el-table__header th {
            background-color: #f0f2f5 !important;
        }

        .el-table__header .el-table__header-cell .cell {
            font-weight: bold !important;
        }
    </style>
</head>
<body>
    <!-- 应用容器 -->
    <div id="supplier-app" class="container fade-in">
        <!-- 搜索区域 -->
        <div class="search-area">
            <el-form :inline="true" :model="searchForm">
                <el-form-item label="供应商">
                    <el-input v-model="searchForm.supplier" placeholder="请输入供应商名称/编号"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchForm.status" class="searchForm-status" placeholder="请选择">
                        <el-option label="启用" value="启用"></el-option>
                        <el-option label="禁用" value="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属行业" class="form-item">
                    <!-- v-model 绑定表单中“所属行业”的选中值 -->
                    <el-select v-model="searchForm.industry" class="searchForm-industry" placeholder="请选择">
                        <el-option v-for="item in industryOptions"
                                   :key="item.value"
                                   :label="item.dictLabel"
                                   :value="item.dictValue"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="进货负责人">
                    <el-input v-model="searchForm.manager" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="handleSearch">查询</el-button>
                    <el-button v-on:click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 功能按钮区域 -->
        <div class="btn-group">
            <el-button type="primary" v-on:click="handleAdd">新增</el-button>
            <el-button v-on:click="handleDelete">删除</el-button>
            <el-button v-on:click="handleCopy">复制</el-button>
            <el-button v-on:click="handleExport">导出</el-button>
            <el-button v-on:click="handleImport">导入</el-button>
            <el-button v-on:click="handleRefresh">刷新</el-button>
        </div>

        <!-- 数据表格区域 -->
        <div class="table-container">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <!-- 固定供应商编号 -->
                <el-table-column prop="code" label="供应商编号" width="120" fixed="left"></el-table-column>
                <!-- 固定供应商名称 -->
                <el-table-column prop="name" label="供应商名称" width="120" fixed="left"></el-table-column>
                <el-table-column prop="industry" label="所属行业" width="120"></el-table-column>
                <el-table-column prop="category" label="供应商分类" width="120"></el-table-column>
                <el-table-column prop="contact" label="联系人" width="120"></el-table-column>
                <el-table-column prop="phone" label="联系电话" width="150"></el-table-column>
                <el-table-column prop="email" label="电子邮箱" width="180"></el-table-column>
                <el-table-column prop="dept" label="进货部门" width="120"></el-table-column>
                <el-table-column prop="manager" label="进货负责人" width="120"></el-table-column>
                <el-table-column prop="status" label="状态" width="100"></el-table-column>
                <el-table-column prop="address" label="供应商地址" width="300"></el-table-column>
                <el-table-column fixed="right" label="操作" width="150">
                    <template #default="scope">
                        <el-button link type="primary" size="small" v-on:click="handleDetail(scope.row)">详情</el-button>
                        <el-button link type="primary" size="small" v-on:click="handleEdit(scope.row)">编辑</el-button>
                        <el-button link type="danger" size="small" v-on:click="handleDeleteRow(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <!-- 引入 Vue 和 Element Plus JS -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <script>
        const { createApp, ref, reactive, onMounted } = Vue;
        const app = createApp({
            setup() {
                // 搜索表单数据、
                const searchForm = reactive({
                    supplier: '',
                    status: '',
                    industry: '',
                    manager: ''
                });

                const industryOptions = ref([]); // 所属行业的字典选项

                // 获取“所属行业”字典数据
                const getIndustryDict = async () => {
                    try {
                        const response = await axios.get('/api/Dict/datas/Industry');
                      industryOptions.value = response.data;
                    } catch (error) {
                        console.error('获取所属行业字典失败：', error);
                        ElementPlus.ElMessage.error('获取所属行业数据失败，请稍后再试');
                    }
                };

                // 组件挂载时主动调用接口（新增）
                onMounted(() => {
                     getIndustryDict();
                });

                // 表格模拟数据
                const tableData = ref([
                    {
                        code: 'GYSDH4345',
                        name: '供应商一',
                        industry: '零售',
                        category: '成品供应商',
                        contact: '李依依',
                        phone: '13808998543',
                        email: 'cwb@tom.com',
                        dept: '采购一部门',
                        manager: '李依依',
                        status: '启用',
                        address: '河南省三门峡市卢氏县文化路'
                    },
                    {
                        code: 'GYSDH4346',
                        name: '供应商二',
                        industry: '制造',
                        category: '成品供应商',
                        contact: '李依依',
                        phone: '13808998543',
                        email: 'cwb@tom.com',
                        dept: '采购一部门',
                        manager: '李依依',
                        status: '启用',
                        address: '河南省三门峡市卢氏县文化路2'
                    },
                    {
                        code: 'GYSDH4347',
                        name: '供应商三',
                        industry: '制药厂',
                        category: '成品供应商',
                        contact: '李依依',
                        phone: '13808998543',
                        email: 'cwb@tom.com',
                        dept: '采购一部门',
                        manager: '李依依',
                        status: '启用',
                        address: '河南省三门峡市卢氏县文化路3'
                    }
                ]);

                // 各功能逻辑
                const handleSearch = () => {
                    console.log('执行查询，条件：', searchForm);
                };
                const handleReset = () => {
                    searchForm.supplier = '';
                    searchForm.status = '';
                    searchForm.industry = '';
                    searchForm.manager = '';
                    console.log('重置搜索条件');
                };


                const handleAdd = () => {
                    window.location.href = "/Supplier/AddPage";
                };
                const handleDelete = () => {
                    console.log('触发“批量删除”操作');
                };
                const handleCopy = () => {
                    console.log('触发“复制供应商”操作');
                };
                const handleExport = () => {
                    console.log('触发“导出供应商数据”操作');
                };
                const handleImport = () => {
                    console.log('触发“导入供应商数据”操作');
                };
                const handleRefresh = () => {
                    console.log('触发“刷新列表”操作');
                };
                const handleDetail = (row) => {
                    console.log('查看供应商详情：', row);
                };
                const handleEdit = (row) => {
                    console.log('编辑供应商：', row);
                };
                const handleDeleteRow = (row) => {
                    console.log('删除供应商：', row);
                };

                return {
                    searchForm,
                    tableData,
                    handleSearch,
                    handleReset,
                    handleAdd,
                    handleDelete,
                    handleCopy,
                    handleExport,
                    handleImport,
                    handleRefresh,
                    handleDetail,
                    handleEdit,
                    handleDeleteRow,
                    industryOptions, // 所属行业字典选项
                };
            }
        });
        app.use(ElementPlus);
        app.mount('#supplier-app');
    </script>
</body>
</html>